<template>
  <div class="container">
    <div class="loading" v-if="loading_flag">
      <span class="loading-tip_title">提示</span>
      <span class="loading-tip_content">{{tip_content}}</span>
      <mt-spinner
        type="snake"
        :size="60"
        color="rgba(42, 140, 255, 1)"
        class="loading-spinner"
        v-show="tip_flag"
      ></mt-spinner>
      <div class="loading-tip_bottom">您也可以通过点击手机短信查看电子车票</div>
    </div>

    <div class="content" v-show="!loading_flag">
      <div class="ticket">
        <div class="ticketTop">
          <mt-navbar v-model="selected" v-if="passenger_todo.length">
            <mt-tab-item
              v-for="(item,index) in passenger_todo"
              v-bind:key="index"
              v-bind:id="item.barcode"
              @click.native="change_selected(index)"
              :ref="'nav'+index"
            >{{item.psgname}}</mt-tab-item>
          </mt-navbar>
          <div class="splitLine splitLine--top" v-if="passenger_todo.length"></div>
          <div class="origin">
            <span class="originTitle">出发地</span>
            <span
              class="originContent"
              v-bind:class="{fold:origin_flod}"
              @click="origin_flod=!origin_flod"
            >{{passenger_details.origin}}</span>
          </div>
          <div class="icon">
            <img class="arrows" src="@assets/arrows.svg" />
          </div>
          <div class="destination">
            <span class="DestTitle">目的地</span>
            <span
              class="DestContent"
              v-bind:class="{fold:destination_flod}"
              @click="destination_flod=!destination_flod"
            >{{passenger_details.destination}}</span>
          </div>
          <div class="date_start">
            <span class="dateTitle">出发日期</span>
            <div class="dateContent">
              <span class="date">{{passenger_details.date_start.date}}</span>
              <span class="time">{{passenger_details.date_start.time}}</span>
              <span class="week">{{passenger_details.date_start.week}}</span>
            </div>
          </div>
        </div>
        <div class="splitLine"></div>
        <div class="code">
          <div class="title">
            <span class="codeTitle">票号</span>
            <span class="codeNum">{{passenger_details.barcode}}</span>
          </div>
          <svg class="barcode" id="barcode" />
          <div class="qrCode" id="qrcode" ref="qrcode"></div>
        </div>
        <div class="ticketMessage">
          <div class="stationName">
            <span class="title">乘车站名称</span>
            <span
              class="content"
              v-bind:class="{fold:station_flod}"
              @click="station_flod=!station_flod"
            >{{passenger_details.origin}}</span>
          </div>
          <div class="passenger">
            <span class="title">乘客姓名</span>
            <span class="content">{{passenger_details.passenger}}</span>
          </div>
          <div class="idcard_no">
            <span class="title">身份证</span>
            <span class="content">{{passenger_details.idcard_no}}</span>
          </div>
          <div class="wicket">
            <span class="title">检票口</span>
            <span class="content">{{passenger_details.wicket}}</span>
          </div>
          <div class="seat_num">
            <span class="title">座位号</span>
            <span class="content">{{passenger_details.seat_num}}</span>
          </div>
          <div class="fare">
            <span class="title">票价</span>
            <span class="content">{{passenger_details.fare}}元</span>
          </div>
        </div>
        <div class="splitLine"></div>
        <div class="officialAccount">
          <div class="offcialQr" id="offcialQr">
            <img src="@assets/officeQr.jpg" alt />
          </div>
          <span class="tip">凭身份证扫码乘车，如需发票请关注公众号获取</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import QRCode from "qrcodejs2";
import JsBarcode from "jsbarcode";
import { getPassenger } from "../api/api";
import { getBarcode } from "../api/api";
import { Toast, Navbar, TabItem, Spinner, MessageBox } from "mint-ui";
import { setTimeout } from "timers";
export default {
  components: {
    [Navbar.name]: Navbar,
    [TabItem.name]: TabItem,
    [Spinner.name]: Spinner
  },
  data() {
    return {
      selected: "",
      passenger_details_arr:[],
      passenger_details:{
          origin: "",
          destination: "",
          date_start: { date: "", time: "", week: "" },
          barcode: "",
          passenger: "",
          idcard_no: "",
          wicket: "",
          seat_num: "",
          fare: ""
      },
      origin_flod: true, //以下三个布尔值用于展开还是收缩车站名
      destination_flod: true,
      station_flod: true,
      passenger_todo: [],
      loading_flag: true, //载入动画flag
      title_nav: false, //顶部navUI组件flag
      qrcode: null,
      tip_content: "电子车票正在生成中请勿关闭",
      tip_flag: true
    };
  },
  methods: {
    /**
     *创建二维码
     */
    creatQrcode: function(id, url, width, height) {
      this.qrcode = new QRCode(id, {
        width: width, // 设置宽度，单位像素
        height: height, // 设置高度，单位像素
        text: url // 设置二维码内容或跳转地址
      });
    },
    update_qrcode(url) {
      this.qrcode.clear(); // 清空二维码.
      this.qrcode.makeCode(url);
    },
    creatBarcode: function() {
      /**
       * 创建条形码
       */
      JsBarcode("#barcode", this.passenger_details.barcode, {
        width: 4,
        height: 80,
        displayValue: false
      });
    },
    getTicketMsg: function(params) {
      /**
       * 得到电子票信息，无参数的时候从url里面获取barcode，有参数的时候使用参数
       */
      let param = {};
      if (!params) {
        param = {
          orderNo: this.$route.query.orderNo,
          barCode: this.$route.query.barCode
        };
      } else {
        param = {
          orderNo: this.$route.query.orderNo,
          barCode: params
        };
      }
      //console.log(param);
      if (!param.orderNo) {
        Toast("地址内未获取到订单号，请联系管理员或查看短信");
        this.tip_content = "地址内未获取到订单号，请联系管理员"
        this.tip_flag = false;
        return false;
      } else if (!param.barCode) {
        //Toast("地址内未获取到票号，请联系管理员");
        return false;
      }
      //得到电子票信息
      getPassenger(param)
        .then(res => {
          
          if (res.data.return_code != "01") {
            Toast("获取票务信息失败，请联系管理员");
            this.passenger_details_arr.push({});
            return;
          }
          this.loading_flag = false;
          let data = res.data;

          let passenger_details = {date_start:{}};
          passenger_details.origin = data.waitStationName;
          passenger_details.destination = data.dstName;
          let dateArr = data.schTime.trim().split(" ");
          passenger_details.date_start.date = dateArr[0];
          passenger_details.date_start.time = dateArr[1].substr(0, 5);
          passenger_details.date_start.week = this.getWeek(dateArr[0]);

          passenger_details.barcode = data.barcode;

          passenger_details.passenger = data.psgName;
          let idcard_no =
            data.psgCerNo.substr(0, 3) +
            "*".repeat(data.psgCerNo.length - 7) +
            data.psgCerNo.substr(-4, 4);
          passenger_details.idcard_no = idcard_no;
          passenger_details.wicket = data.checkGate;
          passenger_details.seat_num = data.seat;
          passenger_details.fare = data.price;
          this.passenger_details = passenger_details;
          this.passenger_details_arr.push(passenger_details);
          this.creatBarcode();
          if (!this.qrcode) {
            this.creatQrcode("qrcode", this.passenger_details.barcode, 175, 175);
          } else {
            this.update_qrcode(this.passenger_details.barcode);
          }
        })
        .catch(error=> {
          console.log(error);
          Toast("获取票务信息失败，请联系管理员");
          this.passenger_details_arr.push({});
        });
    },
    _getBarcode: function() {
      /**
       * 通过URL里面的订单号拿到里面的乘客列表并渲染到头部
       */
      if(!this.$route.query.orderNo){
        return false;
      }
      let query_count = 0;
      if (!this.$route.query.barCode) {
        let orderNo = this.$route.query.orderNo;
        const timer = () => {
          getBarcode(orderNo).then(res => {
            console.log(res);
            res = res.data;
            //console.log(res.getBarcodeBean[0].barcode);
            if (res.commonReturnBean.return_code == "01" && res.getBarcodeBean.length && res.getBarcodeBean[0].barcode!="") {
                this.passenger_todo = res.getBarcodeBean;
                this.selected = res.getBarcodeBean[0].barcode;
                this.getTicketMsg(this.selected);
                this.loading_flag = false;
                this.title_nav = true;
            }else if(query_count < 20) {
                query_count++;
                setTimeout(timer, 3000);
            }
            if (query_count == 20) {
              this.tip_flag = false;
              this.tip_content = "获取电子票失败，请联系管理员";
              MessageBox("提示", "获取电子票失败，请查看短信链接或联系管理员");
            }
          });
        };
        timer();
      } else {
        return false;
      }
    },
    getWeek: function(dateString) {
      /**
       * 获取星期几
       */
      function isNull(object) {
        if (object == null || typeof object == "undefined") {
          return true;
        }
        return false;
      }
      var date;
      if (isNull(dateString)) {
        return "";
      } else {
        var dateArray = dateString
          .trim()
          .split(" ")[0]
          .split("-"); //获取年月日数组
        date = new Date(dateArray[0], parseInt(dateArray[1] - 1), dateArray[2]);
      }
      return "星期" + "日一二三四五六".charAt(date.getDay());
    },
    change_selected: function(index) {
      if(JSON.stringify(this.passenger_details_arr[index]) === '{}' || !this.passenger_details_arr[index]){
        console.log("空值再请求一次");
        this.getTicketMsg(this.selected);
      }else{
        this.passenger_details = this.passenger_details_arr[index];
        this.creatBarcode();
        if (!this.qrcode) {
            this.creatQrcode("qrcode", this.passenger_details.barcode, 175, 175);
          } else {
            this.update_qrcode(this.passenger_details.barcode);
          }
        return
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this._getBarcode();
      this.getTicketMsg();
    });
  },
  updated() {},
  computed: {}
};
</script>


<style lang="less" scoped>
.loading {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-color: white;
  .loading-tip_title {
    display: block;
    margin: 150px auto;
    font-size: 50px;
    font-weight: bold;
    width: 100%;
    height: 80px;
    text-align: center;
  }
  .loading-tip_content {
    display: block;
    width: 100%;
    height: 80px;
    margin: 0 auto;
    text-align: center;
    font-size: 35px;
  }
  /deep/ .mint-spinner-snake {
    margin: 100px auto;
    text-align: center;
    width: 100vw;
    height: 100vw;
    //background-color: red
  }
  .loading-tip_bottom {
    width: 100%;
    height: 80px;
    margin: 100px auto;
    text-align: center;
    font-size: 35px;
  }
}
.container {
  width: 100%;
  height: 100%;
  .content {
    width: 100%;
    //height: 1863px;
    height: 2100px;
    background: linear-gradient(
      180deg,
      rgba(70, 143, 231, 1) 0%,
      rgba(42, 140, 255, 1) 100%
    );
    overflow: hidden;
    .ticket {
      .ticketTop {
        width: 690px;
        background: rgba(255, 255, 255, 1);
        margin: 60px auto 0;
        border-radius: 10px 10px 0 0;
        overflow: hidden;
        padding-top: 15px;
        box-sizing: border-box;
        .splitLine--top{
          margin-bottom:25px; 
        }
        .origin {
          margin-left: 40px;
          display: inline-block;
          vertical-align: top;
          .originTitle {
            width: 84px;
            height: 40px;
            font-size: 28px;
            font-weight: 400;
            line-height: 40px;
            color: rgba(154, 155, 166, 1);
          }
          .originContent {
            width: 224px;
            font-size: 32px;
            font-weight: 600;
            color: rgba(51, 51, 51, 1);
            line-height: 45px;
            display: block;
            margin-top: 8px;
            text-align: left;
          }
        }
        .icon {
          display: inline-block;
          margin-left: 66px;
          margin-top: 62px;
          vertical-align: top;
          width: 30px;
          height: 18px;
          img {
            width: 100%;
            height: 100%;
            vertical-align: top;
          }
        }
        .destination {
          display: inline-block;
          vertical-align: top;
          .DestTitle {
            width: 84px;
            height: 40px;
            font-size: 28px;
            font-family: PingFangSC-Regular;
            font-weight: 400;
            color: rgba(154, 155, 166, 1);
            line-height: 40px;
            margin-left: 207px;
          }
          .DestContent {
            width: 224px;
            height: 45px;
            font-size: 32px;
            font-family: PingFangSC-Medium;
            font-weight: 600;
            color: rgba(51, 51, 51, 1);
            line-height: 45px;
            display: block;
            margin-top: 8px;
            margin-left: 66px;
            text-align: right;
          }
        }
        .date_start {
          display: inline-block;
          margin-top: 24px;
          .dateTitle {
            width: 84px;
            height: 40px;
            font-size: 28px;
            font-family: PingFangSC-Regular;
            font-weight: 400;
            color: rgba(154, 155, 166, 1);
            line-height: 40px;
            margin-left: 40px;
          }
          .dateContent {
            margin-bottom: 35px;
            .date {
              margin-left: 40px;
              width: 208px;
              height: 50px;
              font-size: 36px;
              font-family: PingFangSC-Medium;
              font-weight: 600;
              color: rgba(250, 84, 28, 1);
              line-height: 50px;
            }
            .time {
              width: 90px;
              height: 50px;
              font-size: 36px;
              font-family: PingFangSC-Medium;
              font-weight: 600;
              color: rgba(250, 84, 28, 1);
              line-height: 50px;
              margin-left: 20px;
            }
            .week {
              width: 72px;
              height: 50px;
              font-size: 36px;
              font-family: PingFangSC-Medium;
              font-weight: 600;
              color: rgba(250, 84, 28, 1);
              line-height: 50px;
              margin-left: 20px;
            }
          }
        }
      }
      .line {
        width: 612px;
        height: 2px;
        display: inline-block;
        margin-top: 0px;
        margin-left: 20px;
        vertical-align: top;
        .imgLine {
          width: 612px;
          height: 2px;
          display: block;
        }
      }
      .code {
        padding-top: 25px;
        box-sizing: border-box;
        width: 690px;
        height: 646px;
        background: rgba(255, 255, 255, 1);
        margin: 0 auto;
        overflow: hidden;
        border-bottom: 1px solid #cddff5;
        .title {
          margin-bottom: 27px;
          .codeTitle {
            width: 56px;
            height: 40px;
            font-size: 28px;
            font-family: PingFangSC-Regular;
            font-weight: 400;
            color: rgba(147, 151, 174, 1);
            line-height: 40px;
            margin-left: 230px;
          }
          .codeNum {
            width: 152px;
            height: 40px;
            font-size: 28px;
            font-family: PingFangSC-Regular;
            font-weight: 400;
            color: rgba(147, 151, 174, 1);
            line-height: 40px;
            margin-left: 22px;
          }
        }
        .barcode {
          //
          width: 608px;
          height: 139px;
          background: rgba(255, 255, 255, 1);
          display: block;
          margin: 0 auto;
          margin-bottom: 20px;
        }
        /deep/ .barcode > g {
          width: 100%;
          height: 100%;
        }
        .qrCode {
          width: 350px;
          height: 350px;
          margin: 0px 170px;
          //background: greenyellow !important;
        }
        /deep/ .qrCode canvas + img {
          width: 100%;
          height: 100%;
        }
      }
      .ticketMessage {
        width: 690px;
        // height: 469px;
        background: rgba(255, 255, 255, 1);
        margin: 0 auto;
        overflow: hidden;
        box-sizing: border-box;
        padding: 43px 60px 0px;
        .title {
          width: 140px;
          height: 40px;
          font-size: 28px;
          font-family: PingFangSC-Regular;
          font-weight: 400;
          color: rgba(154, 155, 166, 1);
          line-height: 40px;
          display: block;
        }
        .content {
          width: 224px;
          height: auto;
          font-size: 32px;
          font-family: PingFangSC-Medium;
          font-weight: 600;
          color: #333;
          line-height: 45px;
          background: rgba(255, 255, 255, 1);
          display: block;
          margin-top: 8px;
        }
        .stationName {
          display: inline-block;
          width: 70%;
          vertical-align: top;
        }
        .passenger {
          display: inline-block;
          width: 30%;
        }
        .idcard_no {
          .title {
            margin-top: 44px;
          }
          .content {
            width: 100%;
          }
        }
        .wicket {
          display: inline-block;
          width: 30%;
          margin-bottom: 59px;
          .title {
            margin-top: 44px;
          }
        }
        .seat_num {
          display: inline-block;
          width: 40%;
          .title {
            margin-top: 44px;
          }
        }
        .fare {
          display: inline-block;
          width: 30%;
          .title {
            margin-top: 44px;
          }
        }
      }
      .splitLine {
        border-bottom: 4px dotted #999;
        background-color: #fff;
        width: 690px;
        margin: 0 auto;
        position: relative;
        &::after {
          content: "" !important;
          width: 40px;
          height: 40px;
          border-radius: 50%;
          position: absolute;
          top: -20px;
          left: -20px;
          background-color: #468fe7;
        }
        &::before {
          content: "" !important;
          width: 40px;
          height: 40px;
          border-radius: 50%;
          position: absolute;
          top: -20px;
          right: -20px;
          background-color: #2a8cff;
        }
      }
      .officialAccount {
        width: 690px;
        height: 100vw;
        margin: 0 auto 0;
        background: rgba(255, 255, 255, 1);
        overflow: hidden;
        .offcialQr {
          width: 250px;
          height: 250px;
          //background: red;
          margin: 51px auto 24px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .tip {
          width: 538px;
          height: 40px;
          font-size: 28px;
          font-family: PingFangSC-Regular;
          font-weight: 400;
          color: rgba(153, 153, 153, 1);
          line-height: 40px;
          display: block;
          margin: 0 auto;
          text-align: center;
        }
      }
      .fold {
        overflow: hidden; //超出的文本隐藏
        text-overflow: ellipsis; //溢出用省略号显示
        white-space: nowrap; //溢出不换行
      }
    }
  }
}
/deep/ .mint-tab-item-label {
  //font-size: 2.6vw;
  font-size: 28px;
  font-weight: 400;
  line-height: 20px;
  margin-bottom: 15px;
}
</style>
